<template>
	<view class="padding-20">
		<!-- 地址 -->
		<view class="flex-between flex-boderRadius-view bg-fff padding-20 margin-bottom30" v-if="address.id"
		@click="goToUrl">
			<view class="margin-right20">
				<u-icon name="map" color="#333333" size="20"></u-icon>
			</view>
			<view class="flex-column flex1">
				<view class="fontSize-18 color-000 fontWeight-bold">{{address.name}} {{address.mobile}}</view>
				<view class="fontSize-13 color-999 margin-top10">{{address.area}}{{address.address}}</view>
			</view>
			<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
		</view>
		<view class="flex-between flex-boderRadius-view bg-fff padding-20 margin-bottom30"  v-else
		@click="goToUrl">
			<view class="margin-right20">
				<u-icon name="map" color="#333333" size="20"></u-icon>
			</view>
			<view class="flex-column flex1">
				<view class="fontSize-18 color-000 fontWeight-bold">添加收货信息(非必填)</view>
				<view class="fontSize-13 color-999 margin-top10">请完善收货信息</view>
			</view>
			<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
		</view>	
		
		<!-- 商品信息 -->
		<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
			<view class="flex margin-bottom20">
				<image class="img-160 margin-right20 border-radius10" :src="goods.image" mode=""></image>
				<view class="flex1 flex-column">
					<view class="fontSize-16 color-000 margin-bottom10">{{goods.title}}</view>
					<view class="fontSize-16 color-000 margin-bottom10">{{spu_name}}</view>
					<view class="flex-between">
						<view>
							<!-- <view class="fontSize-13 color-FE3232">￥<text class="fontSize-16">{{goods.sku_price}}</text></view> -->
							<view class="fontSize-12 color-999">积分<text class="fontSize-16 color-FE3232 margin-left10">{{goods.gift_score}}</text></view>
						</view>
						<u-number-box v-model="form.count"></u-number-box>
					</view>
				</view>
			</view>
			<view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">商品积分</view>
				<view class="fontSize-15 color-000 margin-right10"> {{allPrice}}</view>
			</view>
			<!-- <view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">配送费用</view>
				<view class="fontSize-15 color-000 margin-right10">{{goods.delivery_money}}</view>
			</view> -->
			<view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">实付积分</view>
				<view class="fontSize-15 color-000 margin-right10">{{allPrice}}</view>
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="flex-boderRadius-view bg-fff padding-20">
			<view class="fontSize-16 color-000 margin-bottom20">留言：</view>
			<view class="bg-f6f6f6">
				<u--textarea v-model="remark" height="100" placeholder="请输入内容" ></u--textarea>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="position-fixed-94bottom bg-fff padding-20 flex-between">
			<view class="btn-967C5E-15ffffff flex-center flex1" @click="integralPopupShow = true">
				 立即支付
			</view>
		</view>
		
		<!-- 积分弹窗 -->
		<u-popup :show="integralPopupShow" @close="integralPopupShow = false" :closeable="true">
			<view class="popup-view">
				<view class="fontSize-16 color-000 margin-bottom30 fontWeight-bold">选择支付方式</view>
				<view style="height: 50rpx;"></view>
				<!-- <view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<image class="img-44 margin-right20" src="../../../static/image/12.png" mode=""></image>
						<view class="fontSize-15 color-000">微信支付</view>
					</view>
					<view @click="choosePay('微信支付')">
						<image class="img-32" v-if="choosePayName == '微信支付'" src="../../../static/image/14.png" mode="widthFix"></image>
						<image class="img-32" v-else src="../../../static/image/15.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<image class="img-44 margin-right20" src="../../../static/image/13.png" mode=""></image>
						<view class="fontSize-15 color-000">积分支付({{userinfo.score}})</view>
					</view>
					<view @click="choosePay('积分支付')">
						<image class="img-32" v-if="choosePayName == '积分支付'" src="../../../static/image/14.png" mode="widthFix"></image>
						<image class="img-32" v-else src="../../../static/image/15.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="padding-30 margin-top50">
					<view class="btn-967C5E-15ffffff flex-center" @click="confrimPay">
						 确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 积分不足弹窗 -->
		<u-popup :show="insufficientPointsShow"  bgColor="#F6F3E8" @close="insufficientPointsShow = false" mode="center" round="20">
			<view class="insufficien-popup-view flex-justAliCenter-column">
				<view class="fontSize-18 fontWeight-bold color-704234 text-center">您的积分不足</view>
				<image class="img-160 margin-30-0" src="../../../static/image/16.png" mode=""></image>
				<view class="flex-alignItems-center">
					<view class="insufficient-popup-btn flex-center margin-right20"
					@click="insufficientPointsShow = false">取消支付</view>
					<view class="insufficient-popup-btn1 flex-center">微信支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data(){
			return{
				value1: '',
				num:'',
				integralPopupShow:false,
				address: {},
				form: {},
				goods: {},
				spu_name: '',
				spu_price: '',
				// 用户信息
				userinfo: {},
				// 备注
				remark: '',
				payWayIndex: 0,
				pay_type: 1,
				order_no: '',
				// 防抖
				isSubmit:true,
				// 选择支付方式 
				choosePayName:'积分支付'
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.address) {
				this.address = JSON.parse(e.address)
			}
			if (e.form) {
				console.log(e.form)
				this.form = JSON.parse(e.form)
			}
			if (e.goods) {
				this.goods = JSON.parse(e.goods)
				console.log(this.goods)
				this.spu_price = this.goods.sku_price
			}
			if (e.spu_name) {
				this.spu_name = e.spu_name
			}
		},
		onShow() {
			if (this.$store.state.address.address.id) {
				this.address = this.$store.state.address.address
			}
			this.getUserInfo()
		},
		onHide() {
			this.deleteAddressItem()
		},
		computed: {
			allPrice() {
				let price = this.goods.gift_score
				let totalPrice = ((Number(price * this.form.count)))
				totalPrice = totalPrice>0?totalPrice:0
				// return (Number(this.spu_price * this.form.count) - Number(this.score)).toFixed(2)
				return totalPrice
			}
		},
		methods:{
			...mapMutations(['deleteAddressItem']),
			// 获取用户信息
			async getUserInfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				if(res.code ==1){
					this.userinfo = res.data
				}
			},
			// 选择地址
			goToUrl() {
				uni.navigateTo({
					url: '/pages/mine/mine-list/address/address?orderCode=' + '订单选择地址'
				})
			},
			// 选择支付方式
			choosePay(value){
				this.choosePayName = value
			},
			// 确认支付
			async confrimPay() {
				if (!this.address.id) {
					return this.$tools.toast('请选择地址')
				}
				if(!this.isSubmit) return false
				this.isSubmit = false
				
				let payForm = {
					goods_id: this.form.goods_id,
					count: this.form.count,
					address_id: this.address.id,
					spu_id: this.form.spu_id,
					remark: this.remark
				}
				let res = await this.$http.post(this.$api.order_create, payForm, {
					token: true
				})
				if (res.code == 1) {
					// this.order_no = res.data.order_no
					this.payOrder(res.data.order_no)
				}
			},
			// 支付
			async payOrder(order_no){
				// let pay_type = this.choosePayName == '微信支付'?'1':'2'
				let pay_type = 2
				let res = await this.$http.post(this.$api.pay,{order_no:order_no,pay_type:pay_type},{token:true})
				console.log(res)
				if(res.code ==1){
					this.$tools.toast('支付成功')
					this.$tools.redirectTo('/pages/mine/order-list/order-list',200)
					this.isSubmit = true
				}else{
					this.$tools.toast('支付失败')
					this.$tools.redirectTo('/pages/mine/order-list/order-list',200)
					this.isSubmit = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.insufficient-popup-btn1{
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}
	.insufficient-popup-btn{
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #755F47;
		background: rgba(150,124,94,0.14);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		border: 1rpx solid #967C5E;
	}
	.insufficien-popup-view{
		width: 500rpx;
		// height: ;
		padding: 30rpx;
		// background-color: #F8F6F3;
		border-radius: 20rpx;
	}
</style>